<template>
  <div class="kpi-actual">
    <div class="kpi-list-wrap clearfix">
      <div class="bussiness-list">
        <div class="table-selecor">
          <el-input v-model="fieldUrl" placeholder="请输入加载url" @keyup.native.enter="getFieldList">
            <el-button slot="append" @click="getFieldList">加载接口字段</el-button>
          </el-input>
        </div>
        <el-collapse v-model="type" accordion>
          <el-collapse-item name="all" title="全部字段">
            <ul class="field-list" v-if="fieldList.length">
              <li v-for="item in fieldList" :key="item.fieldNm" draggable @dragstart="copyDragList($event, item)">
                {{ item.fieldNm }}
                <div class="list-handler">
                  <el-tooltip effect="dark" content="添加" placement="top" :enterable="false">
                    <span class="plus" @click.prevent="addItem(item)"><i class="el-icon-plus"></i></span>
                  </el-tooltip>
                </div>
              </li>
            </ul>
            <div class="no-record" v-else>
              <img src="~@/assets/img/no_records.png" /><br />
              暂无内容
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="kpi-list">
        <div class="list-title"><icon-svg name="iconFunc"></icon-svg> 函数（fx）</div>
        <el-input v-model="keyword" placeholder="输入搜索关键字" @keyup.native.enter="search">
          <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="keyword.length"></i>
          <el-button slot="append" @click="search"><icon-svg name="iconSearch"></icon-svg></el-button>
        </el-input>
        <ul class="kpi-func-list tag-scrollbar">
          <li v-for="item in funcList" :key="item.funcId" draggable @dragstart="copyDrag($event, item)">
            <div class="func-name">{{ item.funcExpression }}</div>
            <div class="list-handler">
              <el-tooltip effect="dark" content="添加" placement="top" :enterable="false">
                <span class="plus" @click="addFunc(item)"><i class="el-icon-plus"></i></span>
              </el-tooltip>
              <el-tooltip effect="dark" placement="top" :content="item.funcDeclaration" :enterable="false">
                <icon-svg name="iconEvent"></icon-svg>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <actual-content ref="actualContent" :logicalList="logicalList"></actual-content>
  </div>
</template>

<script>
import actualContent from './actual-content'
export default {
  components: {
    actualContent
  },
  data() {
    return {
      fieldUrl: '',
      type: 'all',
      tableList: [],
      fieldList: [],
      keyword: '',
      operatorListCopy: [],
      operatorList: []
    }
  },
  created() {
    this.getTable()
    this.getOperator()
  },
  computed: {
    logicalList() {
      return this.operatorList.filter(item => item.funcType === 1)
    },
    funcList() {
      return this.operatorList.filter(item => item.funcType === 2)
    }
  },
  methods: {
    getTable() {
      this.$ajax({
        url: this.$ajax.setUrl('der/derKpiType/getAllTable'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tableList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getFieldList() {
      if (!this.fieldUrl.trim().length) {
        this.$message.info('请输入url')
        return
      }
      this.$ajax({
        url: this.$ajax.setUrl('IndexAllocation/getJsonToColumns'),
        method: 'post',
        data: this.$ajax.setData({ url: window.TAG_CONFIG['baseUrl'] + this.fieldUrl })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.fieldList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setUrl(url) {
      this.fieldUrl = url.split(window.TAG_CONFIG['baseUrl'])[1]
      this.getFieldList()
    },
    getOperator() {
      this.$ajax({
        url: this.$ajax.setUrl('IndexAllocation/getDerCalculationFunction'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.operatorListCopy = Array.from(data.data)
          this.operatorList = Array.from(data.data)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    search() {
      this.operatorList = this.keyword.trim().length
        ? this.operatorList.filter(
            item => item.funcType === 1 || item.funcExpression.toLowerCase().includes(this.keyword.toLowerCase())
          )
        : Array.from(this.operatorListCopy)
    },
    clearSearch() {
      this.keyword = ''
      this.search()
    },
    addItem(item) {
      this.$refs.actualContent.addItem(
        Object.assign({}, { labTbl: item.tableNm, labFldMap: item.fieldNm }, { type_id: '1' })
      )
    },
    addFunc(item) {
      this.$refs.actualContent.addItem(Object.assign({}, item, { type_id: '2' }))
    },
    copyDragList(event, item) {
      event.dataTransfer.setData('type_id', '1')
      event.dataTransfer.setData('labTbl', item.tableNm)
      event.dataTransfer.setData('labFldMap', item.fieldNm)
    },
    copyDrag(event, item) {
      event.dataTransfer.setData('type_id', '2')
      event.dataTransfer.setData('func_config', JSON.stringify(item))
    }
  }
}
</script>

<style lang="scss">
@import './actual.scss';
</style>
